<template>
<div>
<mt-header fixed title="积分商城"></mt-header>
  <div id="tmpl">
    <!-- 轮播图 -->
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in list">
        <img :src="item.img"/>
      </mt-swipe-item>
    </mt-swipe>
    <!-- mui九宫格样式 -->
    <div class="mui-content">
		  <ul class="mui-table-view mui-grid-view mui-grid-12">
		    <li class="mui-table-view-cell mui-media  mui-col-sm-3">
          <router-link to="" @click.native="jiazai('/list')">
            <span class="mui-icon mui-icon-home"></span>
            <div class="mui-media-body">新品专区</div>
          </router-link>
        </li>
		    <li class="mui-table-view-cell mui-media mui-col-sm-3">
          <router-link to=""  @click.native="jiazai('/list')">
		        <span class="mui-icon mui-icon-email"></span>
		        <div class="mui-media-body">送礼首选</div>
          </router-link>
        </li>
		    <li class="mui-table-view-cell mui-media  mui-col-sm-3">
          <router-link to=""  @click.native="jiazai('/jifen')">
            <span class="mui-icon mui-icon-chatbubble"></span>
            <div class="mui-media-body">积分获取</div>
          </router-link>
        </li>
		    <li class="mui-table-view-cell mui-media mui-col-sm-3">
          <router-link to=""  @click.native="jiazai('/center')">
		         <span class="mui-icon mui-icon-location"></span>
		         <div class="mui-media-body">私人定制</div>
          </router-link>
        </li>
		  </ul> 
		</div>
    <!-- 楼层 -->
    <floor></floor>
  </div>
  </div>
</template>

<script>
//引入楼层组件
import floor from './subcom/floor.vue'
import { Indicator } from 'mint-ui';
  export default{
    components:{
     floor
    },
    data:function(){
      return {
       list:[]
      }
    },
    created(){
      this.getList();
    },
    methods:{
      jiazai(path){
       Indicator.open('加载中...')
       setTimeout(()=>{
         Indicator.close();
         this.$router.push(path)
       },300)
      },
      getList(){
        this.list=[
          {
            id:0,
            img:require('../assets/img/banner1.jpg')
          },
          {
            id:1,
            img:require('../assets/img/banner2.jpg')
          },
          {
            id:2,
            img:require('../assets/img/banner3.jpg')
          },
           {
            id:3,
            img:require('../assets/img/banner4.jpg')
          }
        ]
      }
    }
  }
</script>

<style scoped>
.mint-swipe{
  height: 180px
}
.mint-swipe, .mint-swipe-items-wrap img{
  width: 100%;
}
.mui-grid-view.mui-grid-12 .mui-table-view-cell{
  
  border: none;
  width: 25%;
}
.mui-content > .mui-table-view:first-child{
  margin-top: 0;
}
.mui-grid-view.mui-grid-12{
  border:none;
  background: white;
}
.mui-table-view:before,.mui-table-view:after{
  background-color:white;
 }
.mui-icon-home:before,
.mui-icon-email:before,
.mui-icon-chatbubble:before,
.mui-icon-location:before{
  content:'';
  display: inline-block;
  width: 40px;
  height: 40px;
  background-repeat: round;
}
.mui-icon-home:before{
  background-image:url('../assets/img/ico5.png')
}
.mui-icon-email:before{
  background-image:url('../assets/img/ico2.png')
}
.mui-icon-chatbubble:before{
  background-image:url('../assets/img/ico3.png')
}
.mui-icon-location:before{
  background-image:url('../assets/img/ico4.png')
}


</style>




